Taro使用记录

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 2,096 | 阅读时长 ≈ 10

2021.11.3 星期三 17:00

基础

语法

生命周期

每次进入小程序首页的时候有时候会先执行onlaunch方法，有时又会先执行首页的onload的方法，最后经过确定，在微信小程序中这两个方法并没有执行先后的顺序，因为他们都是异步执行的。

问题： 本来按照事件顺序，小程序初始化时触发App里的onLaunch，后面再执行页面Page里的onLoad，但是在onLaunch里请求获取是否有权限，等待返回值的时候Page里的onLoad事件就已经执行了。

全局变量

方法1：在taro中 getApp()只能取到一开始定义的值，并不能取到改变后的值
要在构造函数中创建，或者在函数外定义，如果在componentDidMount()函数中定义无效。
PS: 如果是混合到原生小程序中，同样取不到Taro小程序里定义的变量。

方法2：新增一个自行命名的 JS 文件，例如 global.js

1
2
3
4
5
6
7
const globalData = {}
export function setGlobalData (key, val) {
  globalData[key] = val
}
export function getGlobalData (key) {
  return globalData[key]
}

方法3：使用 Redux 来进行全局变量的管理

方法4：使用配置。
使用config下的env
使用config下的defineConstants

dom 相关

标签

  1. 获取输入标签的值Input Textarea 通过event.detail.value。 为防止按钮提交的时候，onblur 还没有设置好值。提前函数可以添加延时setTimeout。

组件

Children 与组合
this.props.children, this.props.renderHeader

修改路径-url

在现有路径上面添加参数。
（h5）使用new URI可以获取路径，但是修改hash的时候报错了：不可以修改。
正确方式：需要获取路径（小程序），然后调用路由跳转方式。
getCurrentInstance().router和getCurrentPages

1
2
3
4
5
6
7
8
9
const router = Taro.getCurrentInstance().router || { params: {}, path: '' };
const go2CouponList = useCallback(() => {
    // location.hash = 'jdyushouquan';
    // history.pushState('couponList', '', null)
    let path = router.path;
    const url = path.replace(/#.*/g, '') + '#jdyushouquan'
    // console.log('url', url)
    gotoUrl({url});
}, []);

在旧版本中可以通过 this.$router 访问当前组件/页面路由的详情。在 Taro Next 对应的 API 是在 @tarojs/taro 中的 getCurrentInstance().router，两者的属性一模一样。

###

// useEffect(() => {
// history.pushState(‘couponList’, ‘’, null)
// return () => {
// if(!history.state.couponList) {
// Taro.removeStorageSync(‘bl_confirm_cids’);
// }
// }
// }, []);

api

配置

webpack

v3.4.1 版本默认使用webpack 4.x。 后续版本可以指定webpack 版本。

插件

  1. 读取根路径的上一级（混合项目需要）, const rootPath = path.resolve(__dirname, "../../.."); plugins/
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    export default (ctx) => {
      ctx.onBuildFinish(async () => {
        if (!ctx.runOpts?.options?.blended) return;
        copyFiles();
      });
    })
    const copyHtmlFiles = (ctx) => {
        try {
            // console.log('copy html files', ctx);
            const { paths: { outputPath }, initialConfig } = ctx;
            // console.log('copy html files', ctx);
            // m_static 中html文件夹路径
            // const destPath = path.resolve(__dirname, "../../../../m_static/html");
            const rootPath = path.resolve(__dirname, "../../..");
            // const mProjectPath = path.resolve("../", appPath);
            const destPath = path.join(mProjectPath, "m_static/html");
            const customRoutes = initialConfig?.h5?.router?.customRoutes;
            // console.log('bjdi', mProjectPath, destPath, customRoutes)
            Object.values(customRoutes).map(route => {
                // html文件路径
                const filePath = path.join(destPath, route);
                if (fs.existsSync(filePath)) fs.removeSync(filePath);
                fs.copyFileSync(outputPath + "/index.html", filePath);
                // # 写入特定html片
                const pos = `        <div id="app"></div>`;
                const inc0 = `        <!--#include virtual="/sinclude/common/spdtimming_foot.shtml"-->`
                const inc1 = `        <!--#include virtual="/sinclude/common/cart_link_guide.shtml" --> <!-- 结算链接灰度控制ppms -->`
                const inc2 = `        <!--#include virtual="/sinclude/update/wx/2016/5/cartlock.html"-->  <!-- 购物车lock 灰度ppms-->`
                if (["/order/orderlist_jdm.shtml"].includes(route)) {
                    const data = fs.readFileSync(filePath, "utf8");
                    const html = data.replace(pos, [inc1, pos, inc0].join("\r\n"));
                    fs.writeFileSync(filePath, html);
                }
            });
            console.log("拷贝html结束！");
        } catch (e) {
            console.log("拷贝html失败！", e);
        }

    }

多端

taro多端开发实际

命令行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
taro -h

Usage: taro <command> [options]

Options:
  -v, --version       output the version number
  -h, --help          output usage information

Commands:
  init [projectName]  Init a project with default templete
  config <cmd>        Taro config
  create              Create page for project
  build               Build a project with options
  update              Update packages of taro
  info                Diagnostics Taro env info
  doctor              Diagnose taro project
  inspect             Inspect the webpack config
  convert             Convert native WeiXin-Mini-App to Taro app
  help [cmd]          display help for [cmd]
1
2
3
4
5
6
7
8
taro inspect --help # -h
# taro help inspect
taro inspect -t -o 
## 
$ taro inspect --type weapp
$ taro inspect --type weapp --output inspect.config.js
$ taro inspect --type weapp plugins
$ taro inspect --type weapp module.rules.0

ISSUES

运行

run dev 后访问页面路由出现Cannot GET /order/xxx.shtml
原因：可能是有错误运行失败了（虽然看到是控制台输出是正常的）

升级

  1. uploadFile 上传文件跨域
    从3.4.1升级到3.5.7: 解决Taro.uploadFile 上传图片出现跨域的问题。
    解决：需要手动添加withCredentials: false （修改node_modules）
    Taro 3.5.6: uploadFile 上传文件始终报跨域问题

  2. 运行失败：Cannot find module '/Users/xxxxxx/node_modules/react-refresh/index.js'. Please verify that the package.json has a valid "main" entry
    解决：在devServer配置hot: false

    1
    2
    3
    4
    5
    devServer: {
        port: 10086,
        open: false,
        hot: false,
    }

但是添加这个配置后，出现下面RefreshReg的问题：

  1. 运行成功，但是页面报错：Uncaught ReferenceError: $RefreshReg$ is not defined
    解决： 根据升级3.5.7后Uncaught ReferenceError: $RefreshSig$ is not defined 中提示升级到3.5.8. 并且修改了fast refresh相关配置。

    或配置了 Webpack devServer 关闭热更新：hot: false 时，会出现以下报错：
    而且 fast refresh 的 Babel plugin 和 loader 必须同时启用或关闭。
    <!–
    其他解决方案：

  2. npx browserslist@latest --update-db 失败
    【taro react】—- 编译H5运行后报错：Uncaught ReferenceError: $RefreshSig$ is not defined
  3. 设置webpack mode: 'development', 原因未webapck5热更新问题。
    Webpack使用ReactRefreshWebpackPlugin对JSX文件进行本地热更新解析时 $RefreshSig$ is not defined

  4. 在dev配置中添加isWatch: true 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    module.exports = {
        mode: "development",
        env: {
            NODE_ENV: '"development"'
        },
        defineConstants: {},
        isWatch: true,
        mini: {},
        h5: {}
    }

    升级3.5.7后Uncaught ReferenceError: $RefreshSig$ is not defined

  5. 根据升级3.5.7后Uncaught ReferenceError: $RefreshSig$ is not defined继续升级到3.5.8

chore(release): publish 3.5.8 –>

启动

  1. watch 文件修改没有更新
    npm run build dev:h5
    1
    "dev:h5": "cross-env NODE_ENV=development CLIENT_ENV=h5 taro build --type h5 --watch",

app.config.js 中pages配置和文件夹名 大小写不一致。

  1. taro@3.6.1 需要手动安装 @tarojs/plugin-platform-h5， @tarojs/plugin-platform-weapp

  2. process is not defined #4935

    引入依赖，比如@plato/commponents 报错。（已经定义了使用的环境变量）
    原因：可能依赖中有用到。
    解决：最好定位到应用的变量，尝试定义。或者不使用。
    react-scripts@latest, react-error-overlay 无效。

<!-- 
其他：
[React ReferenceError: process is not defined 错误解决](https://www.jiyik.com/tm/xwzj/web_1747.html)
[【控制台】报错：Uncaught ReferenceError: process is not defined](https://blog.csdn.net/qq_45677671/article/details/127671019)
[React 错误 Uncaught ReferenceError: process is not defined 解决](https://www.jiyik.com/tm/xwzj/web_1016.html)
[React Uncaught ReferenceError: process is not defined](https://stackoverflow.com/questions/70368760/react-uncaught-referenceerror-process-is-not-defined)
> 该错误是由 react-error-overlay 包引起的，该包具有已更新以支持 webpack v5 并且与 react-scripts v4 不兼容的依赖项。
`npm install react-scripts@latest`
> 如果错误没有解决，请尝试安装 6.0.9 版本的 react-error-overlay 包。
开我们的 package.json 文件并添加以下解决方案对象。`resolutions: {react-error-overlay: 6.0.9}`
see：[Is this the bug of react-error-overlay? #11773](https://github.com/facebook/create-react-app/issues/11773)
[Uncaught ReferenceError: process is not defined (NOT react-error-overlay) #12212](https://github.com/facebook/create-react-app/issues/12212)
PS: 没有用。 -->

平台

在windows中转化后的路径 taro-cli 不能正确编译

1
2
3
编译失败...
./src/app.tsx
untime' in 'E:\order\src\'resolve 'E:orderpluginsevents

windows 的路径是\\，build的时候找不到；而且把\r也转义了。

1
2
3
4
5
6
7
8
9
10
11
function injectRuntimePath(platform) {
  // const injectedPath = path.join(__dirname, "./runtime"); // windows 有问题
  const injectedPath = path.normalize(path.join(__dirname, "./runtime"));
  if (isArray(platform.runtimePath)) {
    platform.runtimePath.push(injectedPath);
  } else if (isString(platform.runtimePath)) {
    platform.runtimePath = [platform.runtimePath, injectedPath];
    // windows 有问题，手动修改路径
    // platform.runtimePath = [platform.runtimePath, 'E:/order/plugins/events/runtime'];
  }
}

安装问题

版本不一致

大概率所有问题都可以通过版本一致去解决。
包括：路由问题，。。。等
涉及到依赖：

1
2
3
4
5
6
7
8
{
    "@tarojs/components": "3.3.12",
		"@tarojs/react": "3.3.12",
		"@tarojs/runtime": "3.3.12",
		"@tarojs/taro": "3.3.12",
    "@tarojs/cli": "3.3.12",
		"@tarojs/mini-runner": "3.3.12",
}

gyp ERR! find VS gyp ERR! find VS msvs_version

windows 安装

gyp ERR! find VS gyp ERR! find VS msvs_version not set from command line or npm config gyp ERR! find
error gyp ERR! stack Error: Could not find any Visual Studio installation to use

1
2
3
4
5
npm install --global --production windows-build-tools
npm config set python python3.9
npm config set msvs_version 2019
# npm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npm.org

解决问题步骤：

0) 手动安装了python3.8. (版本保持是一致的)
1） 设置了msvs_version 的版本 2019


2) 手动安装了visual studio 的相关应用(web, Linux, node, .net, C++ 等).

3) 最后设置了npm registry 为原始地址.

knowledge is no pay,reward is kindness
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多
0%